<template>
  <section v-loading="loading">
    <el-tabs
      type="border-card"
      v-model="searchForm.refund_status"
      class="manage-sales"
      @tab-change="tabChange"
    >
      <el-tab-pane label="全部" name="all"> </el-tab-pane>
      <el-tab-pane label="待审核" :name="1"> </el-tab-pane>
      <el-tab-pane label="待处理" :name="2"> </el-tab-pane>
      <el-tab-pane label="已完成" :name="4"> </el-tab-pane>
      <el-tab-pane label="已取消" :name="-1"> </el-tab-pane>
    </el-tabs>
    <div class="manage-sales-content">
      <div class="order-head">
        <el-form inline>
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.order_no"
              placeholder="订单号"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.username"
              placeholder="用户姓名"
            />
          </el-form-item>
          <!-- <el-form-item>
            <el-date-picker
              style="width: 100%"
              v-model="searchForm.order_date"
              type="datetime"
              placeholder="下单日期"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              style="width: 100%"
              v-model="searchForm.pay_date"
              type="datetime"
              placeholder="支付日期"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="searchForm.payment_status"
              clearable
              placeholder="支付状态"
            >
              <el-option label="已支付" :value="1" />
              <el-option label="未支付" :value="0" />
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.send_number"
              placeholder="物流单号"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.addr_name"
              placeholder="收货人姓名"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.addr_phone"
              placeholder="收货电话"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchFun">查询</el-button>
            <el-button @click="resetFun">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="coupon-table">
        <el-table
          border
          stripe
          :data="tableData"
          :height="store.tableHeight - 90"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column label="用户信息" width="300">
            <template #default="{ row }">
              <div class="manage-info">
                <el-image
                  :preview-teleported="true"
                  style="width: 50px; min-width: 50px; height: 50px"
                  :src="row?.user?.headimg"
                  :zoom-rate="1.2"
                  :preview-src-list="[row?.user?.headimg]"
                  :initial-index="4"
                  fit="cover"
                  class="img-box"
                />
                <div class="right">
                  <div>
                    <!-- <label>用户昵称：</label> -->
                    <span>{{ row?.user?.nickname }} </span>
                  </div>
                  <div>
                    <!-- <label>推荐手机：</label> -->
                    <span>{{ row?.user?.phone }} </span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="订单单号/售后单号">
            <template #default="{ row }">
              <div>
                {{ row.order_no }}
              </div>
              <div>
                {{ row?.refund_info?.refund_no }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="{ row }">
              <el-tag> {{ row.refund_status_name }} </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="商品信息" show-overflow-tooltip>
            <template #default="{ row }">
              <div v-for="item in row.items">
                <div style="white-space: nowrap; font-size: 12px">
                  {{ item.goods_name }} （ {{ item.goods_spec }} ）
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="申请时间" width="180" prop="refund_at" />
          <el-table-column
            label="操作"
            width="170"
            align="center"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button type="primary" link @click="updateOpen(row)">
                详情
              </el-button>

              <el-button type="warning" link @click="openOperate(row)">
                售后操作
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-div">
          <div></div>
          <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[20, 50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <div></div>
        </div>
      </div>
    </div>
  </section>
  <drawerPage ref="drawerPageRef" />
  <operatePage ref="operatePageRef" @refreshList="refreshList" />
</template>
<script setup>
import { listApi } from "@/plugins/api/shopping/sales";
import { useCounterStore } from "@/stores/counter.js";
import drawerPage from "./components/DrawerCustom.vue";
import operatePage from "./components/DialogSales.vue";
const store = useCounterStore();
let searchForm = ref({
  refund_status: "all",
});

//
let tableData = ref([]);
let selectData = ref([]);
let loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  selectData.value = [];
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  selectData.value = [];
  getData();
};

function searchFun() {
  currentPage.value = 1;
  selectData.value = [];
  tableData.value = [];
  getData();
}
function resetFun() {
  currentPage.value = 1;
  searchForm.value = {
    refund_status: "all",
  };
  tableData.value = [];
  selectData.value = [];
  getData();
}
function refreshList() {
  getData();
}
function getData() {
  loading.value = true;
  let obj = Object.assign(
    {
      page: currentPage.value,
      pageSize: pageSize.value,
    },
    searchForm.value
  );
  if (obj.refund_status == "all") obj.refund_status = "";
  listApi(obj)
    .then((data) => {
      tableData.value = data.list;
      total.value = data.page.total;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
function handleSelectionChange(val) {
  selectData.value = val;
}
//   售后申请操作
let operatePageRef = ref(null);
function openOperate(row) {
  operatePageRef.value.initFun(row);
}
function tabChange(name) {
  currentPage.value = 1;
  selectData.value = [];
  tableData.value = [];
  getData();
}

// 详情
let drawerPageRef = ref(null);
function updateOpen(row) {
  drawerPageRef.value.initFun(row);
}

//
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.manage-sales {
  border-bottom: none !important;

  :deep(.el-tabs__content) {
    padding: 0;
  }
}

.manage-sales-content {
  width: 100%;
  padding: 10px;
  height: calc(100% - 40px);
  overflow: hidden;
  border: 1px solid #dcdfe6;
  border-top: none;
  box-sizing: border-box;

  .order-head {
  }

  .pagination-div {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .manage-info {
    display: flex;

    .img-box {
      align-self: center;
    }

    .right {
      margin-left: 10px;
      align-self: center;

      span {
        color: #409eff;
      }
    }
  }
}
</style>
